<template>
    <div class="relative">
        <!-- 下拉框 -->
        <div class="border border-gray-300 px-2 py-1 mx-1 rounded-3xl flex items-center justify-center 
                hover:bg-gray-200/20 cursor-pointer transition-all duration-300 ease-in-out"
            ref="selectRef"
            @click="toggleModelDropdown">

            <!-- 图标 -->
            <SvgIcon :name="icon" class="w-5 h-5 mr-1.5" :class="iconColor" />

            <!-- 名称 -->
            <span class="text-gray-800 text-xs whitespace-nowrap">{{ name }}</span>

            <!-- 下箭头图标 -->
            <SvgIcon name="down-arrow"
                :class="isModelDropdownOpen ? 'rotate-180' : ''"
                class="w-5 h-5 text-gray-800 transform transition-transform duration-300"/>
        </div>

        <!-- 下拉框菜单 -->
        <div ref="dropdownRef"
            :class="['py-1 max-h-50 absolute left-0 bg-white rounded-lg shadow-lg border border-gray-200 z-50 overflow-y-auto transition-all duration-300 ease-out transform overflow-x-hidden custom-scrollbar-small',
                dropdownPosition,
                dropdownTranslate
                ]"
            >
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick, defineProps  } from 'vue'

const props = defineProps({
    icon: {
        type: String,
        default: ''
    },
    iconColor: {
        type: String,
        default: ''
    },
    name: {
        type: String,
        default: ''
    },
    isModelDropdownOpen: {
        type: Boolean,
        default: false
    },
})

// 下拉菜单状态
const isModelDropdownOpen = ref(false)
// 下拉框容器引用
const selectRef = ref(null)
// 下拉菜单引用
const dropdownRef = ref(null)
// 下拉菜单位置 默认下方
const dropdownPosition = ref('top-8')
// 模型下拉菜单的动画过渡
const dropdownTranslate = ref('translate-y-0 opacity-0 invisible pointer-events-none')

// 下拉菜单显示/隐藏
const toggleModelDropdown = () => {
  isModelDropdownOpen.value = !isModelDropdownOpen.value

  // 如果下拉菜单显示，则计算位置
  if (isModelDropdownOpen.value) {
    nextTick(() => {
      if (selectRef.value && dropdownRef.value) {
        // 返回元素相对于视图窗口的位置和尺寸信息
        const buttonRect = selectRef.value.getBoundingClientRect()
        
        // 下拉菜单的时机高度
        const dropdownHeight = dropdownRef.value.offsetHeight

        // 检查下方空间是否足够
        // 可用空间 = window.innerHeight - buttonRect.bottom
        // 所需空间 = dropdownHeight
        // 如果可用空间 < 所需空间，说明下方空间不足
        if (window.innerHeight - buttonRect.bottom < dropdownHeight) {
          // 下方空间不足，显示在上方
          dropdownPosition.value = 'bottom-10'
          // 向上展开动画
          dropdownTranslate.value = 'translate-y-[-2px] opacity-100 visible'
        } else {
          // 下方空间足够，显示在下方
          dropdownPosition.value = 'top-8'
          // 向下展开动画
          dropdownTranslate.value = 'translate-y-[2px] opacity-100 visible'
        }
      }
    })
  }
  else {
    // 关闭动画
    dropdownTranslate.value = 'translate-y-0 opacity-0 invisible pointer-events-none'
  }
}

// 点击外部区域关闭下拉菜单
const handleClickOutside = (event) =>{
    // !selectRef.value.contains(event.target) 点击是否发生在元素外部
    if (selectRef.value && !selectRef.value.contains(event.target)) {
        isModelDropdownOpen.value = false
        // 关闭动画
        dropdownTranslate.value = 'translate-y-0 opacity-0 invisible pointer-events-none'
    }
}

// 挂载时添加事件监听器
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

// 卸载时移除事件监听器
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})

</script>
